<template>
  <div class="app-main-content-box">
    <!-- 标题 -->
    <app-main-title title="会员权益中心" />

    <!-- 卡片 -->
    <el-row :gutter="30">
      <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
        <el-card :body-style="{ padding: '0px' }" shadow="hover">
          <div class="card-box" @click="goVipBenefitMemberBirthday">
            <div class="icon">
              <img src="../../../assets/icon/i-activity-coupon.png" alt>
            </div>
            <div class="info">
              <div class="title">生日权益</div>
              <div class="tips app-line-two">会员生日当天享受折扣、积分翻倍等权益</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
        <el-card :body-style="{ padding: '0px' }" shadow="hover">
          <div class="card-box" @click="goVipBenefitMemberDay">
            <div class="icon">
              <img src="../../../assets/icon/i-activity-coupon-bag.png" alt>
            </div>
            <div class="info">
              <div class="title">会员日权益</div>
              <div class="tips app-line-two">添加会员日和权益，会员当天消费可享受折扣、积分翻倍等权益。系统支持创建多个会员日</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    /**
     * 按钮组
     */
    // 跳转会员日
    goVipBenefitMemberDay() {
      this.$router.push({
        name: 'VipBenefitMemberDay'
      })
    },

    // 跳转会员生日权益
    goVipBenefitMemberBirthday() {
      this.$router.push({
        name: 'VipBenefitMemberBirthday'
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.el-col {
  margin-bottom: 20px;
}

.card-box {
  padding: 35px 30px;
  display: flex;
  align-items: center;
  cursor: pointer;

  .icon {
    width: 70px;
    height: 70px;
    margin-right: 30px;
    flex: 0 0 auto;
  }

  .info {
    flex: 1 1 auto;

    .title {
      margin-bottom: 8px;
      font-size: 20px;
      font-weight: bold;
    }

    .tips {
      font-size: 14px;
    }
  }
}
</style>
